import { ProCard } from "@ant-design/pro-components";
import { Input, Tree } from "antd";
import type { DataNode } from "antd/es/tree";

import React, { useState } from "react";

const { Search } = Input;

const Page19: React.FC = () => {
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const treeData: DataNode[] = [
    {
      title: "技术部",
      key: "0-0",
      children: [
        {
          title: "前端组",
          key: "0-0-0",
          children: [
            { title: "React组", key: "0-0-0-0" },
            { title: "Vue组", key: "0-0-0-1" },
            { title: "Angular组", key: "0-0-0-2" },
          ],
        },
        {
          title: "后端组",
          key: "0-0-1",
          children: [
            { title: "Java组", key: "0-0-1-0" },
            { title: "Python组", key: "0-0-1-1" },
            { title: "Node.js组", key: "0-0-1-2" },
          ],
        },
        {
          title: "测试组",
          key: "0-0-2",
          children: [
            { title: "自动化测试", key: "0-0-2-0" },
            { title: "手动测试", key: "0-0-2-1" },
          ],
        },
      ],
    },
    {
      title: "产品部",
      key: "0-1",
      children: [
        { title: "产品设计", key: "0-1-0" },
        { title: "产品运营", key: "0-1-1" },
      ],
    },
    {
      title: "运营部",
      key: "0-2",
      children: [
        { title: "市场运营", key: "0-2-0" },
        { title: "用户运营", key: "0-2-1" },
      ],
    },
  ];

  const onExpand = (newExpandedKeys: React.Key[]) => {
    setExpandedKeys(newExpandedKeys);
    setAutoExpandParent(false);
  };

  const onSelect = (selectedKeys: React.Key[], info: any) => {
    console.log("selected", selectedKeys, info);
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>树形结构页面</h1>
      <ProCard>
        <Search
          style={{ marginBottom: 8 }}
          placeholder="搜索"
          onChange={() => {}}
        />
        <Tree
          onExpand={onExpand}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onSelect={onSelect}
          treeData={treeData}
        />
      </ProCard>
    </div>
  );
};

export default Page19;
